<template>
	<view>
		<!-- 头部导航 -->
		<trend-nav-bar :tabBars="tabBars"></trend-nav-bar>

		<view class="uni-tab-bar">
			<swiper @change="changSelected" :current="trendTabIndex" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
				<!-- 第一个TAB -->
				<swiper-item>
					<!-- 轮播图 -->
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadMore">
						<!-- 轮播图 -->
						<trend-swiper :info="info"></trend-swiper>

						<!-- 热门话题 -->
						<hot-topic :hotTopicInfo="hotTopicInfo"></hot-topic>

						<view class="trend-list">
							<view class="trend-list-title">
								<view class="icon iconfont icon-xiangji"></view>
								广场
							</view>

							<!-- 广场详情 -->
							<view class="trend-list-info">
								<block v-for="(trend, index) in trendInfo.list" :key="index"><trend-info :trend="trend"  :index="index" @thumbsUp="thumbsUp"></trend-info></block>
							</view>
						</view>

						<!-- 加载更多 -->
						<load-more :loadText="loadText" :loading="false"></load-more>
						<!-- 悬浮按钮 -->
						<view><uni-fab @fabClick="addTrend" :popMenu="false" :pattern="fabStyle" horizontal="right" vertical="bottom"></uni-fab></view>
					</scroll-view>
				</swiper-item>

				<!-- 标签 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="list">
						<hot-tag :type="0" tagImg="../../static/tag/hot.png" :tagList="tagInfo.hotTags" :tagTitle="hotTagtTitle.hot"></hot-tag>
						<hot-tag :type="1" tagImg="../../static/tag/recomm.png" :tagList="tagInfo.recommendTags" :tagTitle="hotTagtTitle.recommend" ></hot-tag>
						<hot-tag :type="2" tagImg="../../static/tag/new.png" :tagList="tagInfo.newTags" :tagTitle="hotTagtTitle.new" ></hot-tag>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import trendNavBar from '../../components/trend/trend-nav-bar.vue';
import trendSwiper from '../../components/trend/trend-swiper.vue';
import hotTopic from '../../components/trend/hot-topic.vue';
import loadMore from '../../components/common/load-more.vue';
import trendInfo from '../../components/common/trend-info.vue';
import hotTag from '../../components/trend/hot-tag.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import { mapState, mapMutations } from 'vuex';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	computed: {
		...mapState(['trendTabIndex'])
	},
	components: {
		trendNavBar,
		trendSwiper,
		hotTopic,
		loadMore,
		trendInfo,
		uniFab,
		hotTag
	},
	data() {
		return {
			fabStyle: {
				color: '#ffffff',
				buttonColor: '#FE9AB0'
			},
			loadText: '上拉加载更多',
			tabBars: [{ name: '最新', id: 'maxNew' }, { name: '标签', id: 'tag' }],
			info: {
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255,.5)',
					selectedBackgroundColor: '#fff',
					selectedBorder:'1rpx rgba(255, 255, 255, 0.3) solid',
					border:'1rpx rgba(255, 255, 255, .5) solid'
				},
				list: []
			},
			user:{},
			swiperHeight: 0,
			hotTopicInfo: [],
			hotTagtTitle:{},
			trendInfo: {
				pageNo:1,
				list:[]
			},
			tagInfo: {
			}
		};
	},
	methods: {
		...mapMutations(['setTrendTabIndex']),
		changSelected(e) {
			this.setTrendTabIndex(e.detail.current);
		},
		loadMore() {
			if (this.loadText != '上拉加载更多') {
				return;
			}
			// 修改状态
			this.loadText = '加载中...';
			// 获取数据
			this.trendInfo.pageNo+=1;
			this.loadTrendList();
		},
		init(){
			this.hotTagtTitle = {
				hot:this.user.userSex===1?'人气女生标签':'人气男生标签',
				recommend:this.user.userSex===1?'推荐女生标签':'推荐男生标签',
				new:this.user.userSex===1?'新加女生标签':'新加男生标签',
			}
		},
		loadBanner(){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.banner,
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.info.list.push(...res.data.data);
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					console.log(r);
				}
			});
		},
		
		loadTopTags(){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.topTags,
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.tagInfo = res.data.data;
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					console.log(r);
				}
			});
		},
		
		loadHotTopic(){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.topTalk,
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.hotTopicInfo.push(...res.data.data);
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					console.log(r);
				}
			});
		},
		loadTrendList(){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.trendList,
			    header: constant.authHead(),
				data: {
					"pageNo":this.trendInfo.pageNo
				},
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.trendInfo.list.push(...res.data.data);
						if(res.data.data.length<10){
							this.loadText = '没有更多数啦!';
						}else{
							this.loadText = '上拉加载更多';
						}
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					this.loadText = '上拉加载更多';
					console.log(r);
				}
			});
		},
		thumbsUp(index){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.thumbsUp,
			    data: {
					"trendId":this.trendInfo.list[index].id
				},
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						if(this.trendInfo.list[index].likesNum<res.data.data){
							this.trendInfo.list[index].isLike = true;
						}else{
							this.trendInfo.list[index].isLike = false;
						}
						this.trendInfo.list[index].likesNum = res.data.data;
					}else{
						showToast(res.data.msg);
					}
			    },fail(r){
					console.log(r);
				}
			});
		},
		addTrend() {
			uni.navigateTo({
				url: `../topic/topic?type=${2}`
			});
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight - 65;
				this.user=uni.getStorageSync(constant.user);
				this.init();
				this.loadBanner();
				this.loadHotTopic();
				this.loadTrendList();
				this.loadTopTags();
			}
		});
	}
};
</script>

<style lang="less" scoped>
.trend-list {
	.trend-list-title {
		padding: 0 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
		font-weight: 700;
		border-bottom: 1px solid #eeeeee;

		view {
			color: rgba(122, 102, 224, 0.75);
			font-weight: 400;
			margin-right: 10rpx;
		}
	}
}
</style>
